<template lang="pug">
  .clearfix
    Modal(
      v-model="isShowAddInfoModal"
      title="添加交付完成信息"
      width="900"
    )
      Form.ivu-row.form-style-1(ref="formData" :model="formData" :rules="rules" :label-width="130")
        Row(type="flex" justify="start")
          Col(span="12")
            FormItem.ivu-form-item-required(label="合同金额：")
              Input.input-has-border(v-model="formData.contractPayment" placeholder="请输入" readonly)
          Col(span="12")
            FormItem.ivu-form-item-required(label="项目经理/助理：")
              Input.input-has-border(v-model="formData.serverName" placeholder="请输入" readonly)
          Col(span="12")
            FormItem.ivu-form-item-required(label="课酬金额：")
              Input.input-has-border(v-model="formData.payment" placeholder="请输入" readonly)
          Col(span="12")
            FormItem(label="综合费用：")
              Input.input-has-border(v-model="formData.amount" placeholder="请输入")
          Col(span="24")
            FormItem(label="备注信息：")
              Input.input-has-border(v-model="formData.remark" type="textarea" placeholder="请输入")
          Col(span="12")
            FormItem.ivu-form-item-required(label="完成时间：")
              DatePicker.input-has-border(:value="formData.completeTime" placeholder="请选择" type="datetime" format="yyyy-MM-dd HH:mm" style="display:block" @on-change="completeTimeChange")
          Col(span="24")
            FormItem(label="详细费用附件：")
              Upload.display-inline-block(
                ref="upload"
                :headers="headers"
                :max-size="10 * 1024"
                :on-exceeded-size="handleMaxSizeTen"
                :before-upload="fyfjBeforeUpload"
                accept=".xls, .xlsx"
                action=""
                :show-upload-list="false"
              )
                Button(type="info") 附件上传
              .display-inline-block.ml-20(v-if="formData.amountFilePath")
                Tag(size="large") {{formData.amountFilePath.name}}
          Col(span="24")
            FormItem.ivu-form-item-required(label="结项报告：")
              Upload.display-inline-block(
                ref="upload"
                :headers="headers"
                :max-size="10 * 1024"
                :on-exceeded-size="handleMaxSizeTen"
                :before-upload="jxbgBeforeUpload"
                action=""
                :show-upload-list="false"
              )
                Button(type="info") 结项报告上传
              .display-inline-block.ml-20(v-if="formData.jxbgFiles")
                Tag(size="large") {{formData.jxbgFiles.name}}
              .ivu-form-item-error-tip(v-if="showTip") 请上传结项报告
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import Cookies from 'js-cookie'
import { PolicySupportApi } from '@/api/PolicySupport.api.js'

export default {
  name: '',

  props: {
  },

  components: {
  },

  data () {
    return {
      showTip: false,
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      isShowAddInfoModal: false,
      currentPreviewImg: null,
      formData: {
        productDeliveryID: '',
        contractPayment: '',
        serverName: '',
        payment: '',
        amount: '',
        amountFilePath: null,
        remark: '',
        jxbgFiles: null,
        completeTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm'),
      },
      rules: {
        jxbgFiles: [
          { required: true, message: '请上传结项报告' }
        ],
      },
      arrListDown: {
        tempOps: []
      },
      file: null
    }
  },

  watch: {
    isShowAddInfoModal (val) {
      if (!val) {
        Object.assign(this.$data, this.$options.data.call(this));
      }
    }
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowAddInfoModal = false
    },

    show () {
      this.isShowAddInfoModal = true
      this.file = null
      this.formData = {
        productDeliveryID: '',
        contractPayment: '',
        serverName: '',
        payment: '',
        amount: '',
        amountFilePath: null,
        remark: '',
        jxbgFiles: null,
        completeTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm'),
      }
    },

    // 费用附件上传前
    fyfjBeforeUpload (file) {
      // this.file = file
      this.formData.amountFilePath = file
      // console.log('file: ', this.file)
      return false
    },
    // 结项报告上传前
    jxbgBeforeUpload (file) {
      // this.file = file
      this.formData.jxbgFiles = file
      this.showTip = false
      // console.log('file: ', this.file)
      return false
    },

    completeTimeChange (val) {
      this.formData.completeTime = val
    },

    // 提交表单
    handleSubmit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.formData.jxbgFiles) {
            let formData = new FormData()
            let emptyFile = new File([], '', {type: ''})
            formData.append('productDeliveryID', this.formData.productDeliveryID)
            formData.append('amount', this.formData.amount)
            formData.append('remark', this.formData.remark)
            formData.append('completeTime', this.formData.completeTime)
            if (this.formData.amountFilePath) {
              formData.append('files', this.formData.amountFilePath)
            } else {
              formData.append('files', emptyFile)
            }
            if (this.formData.jxbgFiles) {
              formData.append('files', this.formData.jxbgFiles)
            } else {
              formData.append('files', emptyFile)
            }
            console.log(emptyFile)
            PolicySupportApi.AddResult(formData).then(res => {
              console.log(res)
              if (res.data.success) {
                this.$Message.success(res.data.message)
                this.isShowAddInfoModal = false
                Object.assign(this.$data, this.$options.data())
                this.$emit('query')
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 10,
                  closable: true
                })
              }
            })
          } else {
            this.showTip = true
            return false
          }
        } else {
          this.$Message.warning('请输入必填项')
        }
      })
    },

    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    }
  }
}
</script>

<style lang="less">
</style>
